<template>
  <div>
    <el-card style="width: 500px; margin: 50px auto">
      <h1 style="width:100px;margin: 15px auto">账号管理</h1>
      <el-form :model="updateForm" ref="registerForm" :rules="rules" label-width="160px">
        <!-- 头像 -->
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:9527/aliyun/oss/upload"
            :headers="headers"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="updateForm.avatar" :src="updateForm.avatar" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item prop="nickname" label="昵称:">
          <el-input v-model="updateForm.nickname" style="width: 220px" placeholder="请输入昵称"/>
        </el-form-item>
        <el-form-item prop="phone" label="手机号码:">
          <el-input v-model="updateForm.phone" style="width: 220px" placeholder="请输入手机号"/>
        </el-form-item>
        <el-form-item prop="gender" label="性别:">
          <el-radio v-model="updateForm.gender" label="1">男</el-radio>
          <el-radio v-model="updateForm.gender" label="2">女</el-radio>
        </el-form-item>
        <el-form-item prop="birthday" label="生日:">
          <el-date-picker
            v-model="updateForm.birthday"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">更新</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>


export default {
  name: "login",
  data() {
    return {
      updateForm: {
        id: '',
        nickname:  '',
        phone: '',
        avatar: '',
        gender:  '1',
        birthday:  '',
      },
      rules: {
        username: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
        password: [{required: true, message: '密码不能为空', trigger: 'blur'}]
      }
    }
  },
  methods: {
    submit(){
      this.$refs.loginForm.validate(v => {
        if (v) {
          // TODO 用户登录 跳转到导航页
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
              this.$router.push({ path: this.$route.query.redirect || '/' })
            })
            .catch(() => {
              this.$message.error('登录失败');
            })
          // console.log(this.loginForm)
          // this.$router.push({ path: this.$route.query.redirect || '/' })
        } else {
          return false
        }
      })
    }
  },
}
</script>

<style scoped>

</style>
